<template>

<div class="box">
    <el-empty style="width: 100%;" description="暂无数据" v-if="data.tableData.length === 0" />
<div style="flex:1">
<div class="list-box" v-for="(item,i) in data.tableData" :key="item.id">
    <div>
        <img style="width:200px;height: 200px;"  :src="imgList[i%5]" alt=""  @click="imgFn(item)"/>
        {{ item.name }}
    </div>
    
   
</div>

<el-dialog v-model="dialogTableVisible" :title="detail.name"  width="500px" draggable>
     <div class="box-card list-item">
        <div>姓名：{{ detail.username }}</div>
        <div>报名赛事：{{ detail.name}}</div>
        <div>报名情况：{{statusList.find(item =>item.value === detail.status).label  }}</div>
        <div>申请时间：{{ formatDateTime(detail.applyTime)}}</div>
        <div>手机号：{{ detail.phone}}</div>
            <el-button class="button" type="success" @click="getType(detail)" v-if="detail.status==='PENDING'">取消报名</el-button>

    </div>
</el-dialog>
<!-- <div style="margin-top: 25px">
<el-pagination
    @size-change="load"
    @current-change="load"
    v-model:current-page="data.currentPage"
    v-model:page-size="data.pageSize"
    :page-sizes="[5, 10, 15, 20]"
    background
    layout="total, sizes, prev, pager, next, jumper"
    :total="data.total"
/>
</div>  -->
</div>
    <div class="ipt">
        <el-button class="button" type="success" style="width: 90px;" @click="loadByName('')">全部</el-button>
        <el-button class="button" type="success" style="width: 90px;" v-for="(item,i) in statusList" :key="i" @click="loadByName(item.value)">{{ item.label }}</el-button>

    </div>
</div>
  </template>
  
  <script setup>
  import {onScopeDispose, reactive,ref} from "vue";
  import {Delete, Edit, Search} from "@element-plus/icons-vue";
  import request from "@/utils/request.js";
  import {ElMessage, ElMessageBox} from "element-plus";
  import dayjs from "dayjs";
  import img1 from '@/assets/01.jpeg'
  import img2 from '@/assets/02.jpeg'
  import img3 from '@/assets/03.jpeg'
  import img4 from '@/assets/04.jpeg'
  import img5 from '@/assets/05.jpeg'
const imgList = [img1,img2,img3,img4,img5]
// 待定、已批准、已拒绝、已取消
const statusList =ref([
    {label:'待定',value:'PENDING',type:'warning'},
    {label:'已批准',value:'APPROVED',type:'success'},
    {label:'已拒绝',value:'REJECTED',type:'danger'},
    {label:'已取消',value:'CANCELLED',type:'danger'},
]) 
const detail = ref({})
const dialogTableVisible = ref(false)
const imgFn = (row) => {
    detail.value = row
    dialogTableVisible.value = true
}
  // 修改日期格式化函数
  const formatDateTime = (date) => {
    // 显式指定输入格式
    return date ? dayjs(date, 'YYYY-MM-DDTHH:mm:ss').format('YYYY-MM-DD HH:mm:ss') : '--';
  };
  const user = ref(JSON.parse(localStorage.getItem('user'))) 
  const data = reactive({
    username: '',
    name: '',
    applyTime: '',
    status: '',
    phone: '',
    form: {},
    tableData: [],
    currentPage: 1,
    pageSize: 5,
    total: 0,
    FormVisible: false,
    ids: [],
  });
  
  const loadByName = (type) => {
    data.currentPage = 1;
    request.get('/Registration/SelectRegistrationInformation', {
      params: {
        pageNum: data.currentPage,
        pageSize: 999,
        role: 'PARTICIPANT', 
        userId: user.value.role =="PARTICIPANT"? user.value.id : null,
        status:type || ''
      },
    }).then((res) => {
      data.tableData = res.data.list;
      data.total = res.data.total;
    });
  };
  
  const load = () => {
    request.get('/Registration/SelectRegistrationInformation', {
      params: {
        pageNum: data.currentPage,
        pageSize: data.pageSize,
        status: '',
        role: 'PARTICIPANT',
        userId: user.value.role =="PARTICIPANT"? user.value.id : null
      },
    }).then((res) => {
      console.log('API响应数据:', res.data.list); // 检查applyTime字段是否存在
      data.tableData = res.data?.list || [];
      data.total = res.data?.total || 0;
    });
  };
  
  load();
  
  const getType = () => {
    const params = {
      ...detail.value,
      startTime: detail.value.applyTime ? dayjs(detail.value.applyTime).format('YYYY-MM-DD HH:mm:ss') : null,
      status:'CANCELLED'
    };
    ElMessageBox.confirm('您确认取消报名信息吗', '确认', { type: 'warning' }).then(() => {
        request.put('/Registration/updateRegistrationInformation', params).then(res => {
      if (res.code === '200') {
        ElMessage.success("操作成功");
        dialogTableVisible.value = false;
        load();
      } else {
        ElMessage.error(res.msg);
      }
    });
    }).catch(() => {});
  };
  

  </script>
  
  <style scoped>
  .list-box{
    /* width: 100%; */
    margin: 20px;
    display: inline-block;
    width: 200px;
}
  .list-item{
    height: 240px;
    line-height: 40px;
    width: 500px;

  }
    .box{

            display: flex;
        
    }

    .ipt{
        margin-bottom: 10px;
        width: 300px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20px;
    }
    .button{
        margin: 0 !important;
    }
  </style>